<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, nemo! Corrupti accusamus tempore aspernatur cupiditate veniam consequatur impedit sequi quam minima. Ducimus esse qui voluptatum. Architecto culpa natus ex maxime!</p>
		<div style="width: 100px; height: 100px; background: black;"></div>
		<span>文本</span>
		<br>
		<input type="button" value="按钮2">
		<input type="text" />
		<script>
			
			
			
			/* javaScript:基础语法+  DOM（页面）+BOM（浏览器）
			JQuery操作DOM方式【7个方式，36个函数】---改变页面效果
			1.元素内容操作：操作元素和元素内容的方式【3个函数】
			.html()
			.val()
			.text()
			 2.元素属性操作：存在元素的属性【固定属性、附加属性】【4个函数】
			 .attr()
			 .removeAttr()
			 .prop()
			 .removeProp
			 3.元素类名操作：操作样式【4个函数】
			 addClass()
			 removeClass()
			 toggleClass()
			 hasClass()
			 4.元素样式【位置】操作：【5个函数】
			 css()
			 width()和height()
			 outerwidth()和outerheight()
			 5.元素删除和插入操作：【7个函数】
			 append()
			 prepend()
			 after()      
			 before()     
			 remove()      
			 empty()  
			replaceWith()
			 6.元素遍历操作：【6个函数】
			 append()   
			 prepend()   
			 
			 after()      
			 before()     
			 
			 remove()      
			 empty()       
			 7.动画操作：【7个函数】
			 show()    功能：显示效果     本质：display:block
			 hide()    功能：隐藏效果      本质：display:none
			 
			 slideDown()   功能：  （滑动时）向下效果
			 slideUp()     功能：   （滑动式）向上效果
			 
			 fadeIn()      功能：淡入效果
			 fageOut()     功能：淡出效果
			 
			 hover()       功能：悬停切换效果
			 */
			$("input[type='button']").click(function(){
				$("input[type='text']").val("文本框输出效果");
			});
		   // JQuery操作DOM：通过点击一个元素绑定一个事件给另外一个元素改变效果
		   //.html()函数:增加一个元素,覆盖原来的HTML
		   $('button').click(function(){
			   $("span").html("<a href='#'>超文本</a>");
			   //DOM操作--改变页面其他元素
			  //DOM操作--改变p元素改成marquee元素
			  $('p').html("<marquee>跑马灯...</marquee>");
			  /* 练习：100*100框 div 鼠标移动上去，文本改成 超文本
			          按钮和输入框，点击按钮，输入框输出文字效果
			  */
		   });
		   
		</script>
	</body>
</html>